<template>
  <div class="studentadd">
    <el-card>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
      >
        <el-form-item label="用户名：" prop="userName">
          <el-input v-model="ruleForm.userName" />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="ruleForm.password" />
        </el-form-item>
        <el-form-item label="真实姓名：" prop="realName">
          <el-input v-model="ruleForm.realName" />
        </el-form-item>
        <el-form-item label="年龄：">
          <el-input v-model="ruleForm.age" />
        </el-form-item>
        <el-form-item label="性别：" prop="region" style="width: 300px">
          <el-select v-model="ruleForm.sex" placeholder="性别">
            <el-option label="男" value="1" />
            <el-option label="女" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期：" style="width: 300px">
          <el-date-picker
            v-model="ruleForm.birthDay"
            type="date"
            placeholder="选择日期"
            clearable
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="手机：">
          <el-input v-model="ruleForm.phone" />
        </el-form-item>
        <el-form-item label="年级：" style="width: 300px" prop="userLevel">
          <el-select v-model="ruleForm.userLevel" placeholder="年级">
            <el-option v-for="item in data" :label="item.name" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop="status" style="width: 300px">
          <el-select v-model="ruleForm.status" placeholder="启用">
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>

      <el-form-item style="margin-left: 90px">
        <el-button type="primary" @click="Onsubmit">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";

import type { FormInstance, FormRules } from "element-plus";

import UserAPI ,{ RuleForm } from "@/api/system/user.api";
import { useRouter } from "vue-router";
const router=useRouter()
const ruleForm = ref<RuleForm>({
  id: null,
  userName: "", //用户名
  password: "", //密码
  realName: "", //真实姓名
  role:1, //角色
  status: 1, //状态
  age: "", //年龄
  sex: "", //性别
  birthDay: null, //生日
  phone: null, //手机号
  userLevel: 1, //年级
});
// 获取的表单的ref
const ruleFormRef = ref<FormInstance>();

interface arrType{
  value:number
  name:string
}
let data=ref<arrType[]>([
  {value:1,name:'一年级'},
  {value:2,name:'二年级'},
  {value:3,name:'三年级'},
  {value:4,name:'四年级'},
  {value:5,name:'五年级'},
  {value:6,name:'六年级'},
  {value:7,name:'初一'},
  {value:8,name:'初二'},
  {value:9,name:'初三'},
  {value:10,name:'高一'},
  {value:11,name:'高二'},
  {value:12,name:'高三'},
])

const rules = reactive<FormRules<RuleForm>>({
  userName: [
    { required: true, message: "请输入用户名", trigger: "blur" },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "change",
    },
  ],
  realName: [
    {
      required: true,
      message: "请输入真实姓名",
      trigger: "change",
    },
  ],
  userLevel: [
    {
      type: "date",
      required: true,
      message: "请输入年龄",
      trigger: "change",
    },
  ],
  status: [
    {
      type: "date",
      required: true,
      message: "请选择状态",
      trigger: "change",
    },
  ],
});

function Onsubmit(){
  ruleFormRef.value?.validate(f=>{
    if(f){
      UserAPI.editUser(ruleForm.value).then(res=>{
        ElMessage({
          type:"success",
          message:"添加成功"
        })
        router.push("/user/student")
      })
    }
  })
}
</script>

<style scoped>
.studentadd {
  width: 100%;
  height: 100%;
}
</style>
